<template>
	<view class="pagination-wrap">
		<view class="pagination">
			<view 
				class="pagination-btn" 
				@click="pageOperation(-1)"
				:class="{
					disabled: currentPage <= 1
				}"
			>
				<template v-if="showIcon===true || showIcon === 'true'">
					<!-- <iconfont color="#000" size="20" type="arrowleft"></iconfont> -->
					<view class="cuIcon-back"></view>				
				</template>
				<template v-else>
					{{prevText}}
				</template>
			</view>
			<view class="pager">
				<view 
					class="number" 
					v-for="(num, index) in shouBadgeNum" 
					:key="index"
					:class="{
						active: num + addNun == currentPage
					}"
					@click="currentChange(num + addNun)"
				>
				{{ num + addNun }}
				</view>
			</view>
			
			<view 
				class="pagination-btn" 
				@click="pageOperation(1)" 
				:class="{
					disabled: currentPage >= totalPage
				}">
				<template v-if="showIcon===true || showIcon === 'true'">
					<view class="cuIcon-right"></view>
				</template>
				<template v-else>
					{{nextText}}
				</template>
			</view>
			
			
		</view>
	</view>
	
	
</template>

<script>
	export default {
		props: {
			total: { //数据总量
				type: [Number, String],
				default: 0
			},
			pageSize: { //每页数据量
				type: [Number, String],
				default: 10
			},
			currentPage: {
				type: [Number, String],
				default: 1
			},
			prevText: {
				type: String,
				default: '上一页'
			},
			nextText: {
				type: String,
				default: '下一页'
			},
			showIcon: { //是否以 icon 形式展示按钮
				type: [Boolean, String],
				default: true
			}
		},
		data () {
			return {
				scoped_current_page: this.currentPage
			}
		},
		computed: {
			shouBadgeNum () {
				let len = Math.ceil(this.total / this.pageSize);
				if (len >= 7) len = 7;
				else if (len <= 1 ) len = 1;
				return len;
			},
			totalPage () {
				return Math.ceil(this.total / this.pageSize)
			},
			addNun () {
				if (this.totalPage <= 7 || this.currentPage <= 3 ) {
					return 1;
				} else if (this.totalPage - this.currentPage <= 3) {
					return this.totalPage - 7 + 1;
				} else {
					return this.currentPage - 3;
				}
			}
		},
		watch: {
			scoped_current_page(num) {
				this.$emit('currentChange', num)
			}
		},
		methods: {
			currentChange(num) {
				if (num <= 1) num = 1
				else if (num >= this.totalPage)  num = this.totalPage;
				this.scoped_current_page = num;		
			},
			pageOperation(num) {
				this.currentChange(this.currentPage + num);
			}
		}
	}
</script>

<style lang="scss">
.pagination-wrap {
	display: flex;
	justify-content: center;
	margin: 20upx;
}
.pagination {
	border-radius: 6upx;
	display: flex;
	// background: #fff;
	.number,
	&-btn {
		padding: 6upx 12upx;
		min-width: 60upx;
		text-align: center;
	}
	.disabled  {
		color: #bbb;
	}
	
}
.pager {
	 display: flex;
	.active {
		color: #fff;
		background: #007aff;
		font-size: 1.5;
	}
}
</style>
